"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, MapPin, Users, Star, MessageCircle, ArrowLeft, Briefcase, Award } from "lucide-react"

export default function FindTeamPage() {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedRole, setSelectedRole] = useState("all")
  const [selectedLocation, setSelectedLocation] = useState("all")
  const [selectedExperience, setSelectedExperience] = useState("all")

  const teamMembers = [
    {
      id: 1,
      name: "张伟",
      role: "技术合伙人",
      avatar: "/placeholder.svg?height=60&width=60",
      location: "北京",
      experience: "5年+",
      skills: ["React", "Node.js", "Python", "AI/ML"],
      bio: "前阿里巴巴高级工程师，专注于AI和大数据领域，寻找有潜力的创业项目",
      rating: 4.8,
      projects: 12,
      connections: 156,
      verified: true,
      availability: "立即可用",
      contact: {
        email: "zhang.wei@example.com",
        phone: "+86 138-0013-8000",
        github: "zhangwei-dev",
        linkedin: "zhang-wei-tech",
      },
    },
    {
      id: 2,
      name: "李小雨",
      role: "产品经理",
      avatar: "/placeholder.svg?height=60&width=60",
      location: "上海",
      experience: "3-5年",
      skills: ["产品设计", "用户研究", "数据分析", "项目管理"],
      bio: "腾讯产品经理，擅长0-1产品孵化，对教育和健康领域有深入理解",
      rating: 4.9,
      projects: 8,
      connections: 89,
      verified: true,
      availability: "2周后",
      contact: {
        email: "li.xiaoyu@example.com",
        phone: "+86 139-0013-9000",
        linkedin: "li-xiaoyu-pm",
      },
    },
    {
      id: 3,
      name: "王强",
      role: "市场营销",
      avatar: "/placeholder.svg?height=60&width=60",
      location: "深圳",
      experience: "3-5年",
      skills: ["数字营销", "品牌策划", "社交媒体", "增长黑客"],
      bio: "字节跳动增长团队核心成员，帮助多个产品实现用户增长突破",
      rating: 4.7,
      projects: 15,
      connections: 203,
      verified: false,
      availability: "1个月后",
      contact: {
        email: "wang.qiang@example.com",
        phone: "+86 137-0013-7000",
      },
    },
    {
      id: 4,
      name: "陈美丽",
      role: "UI/UX设计师",
      avatar: "/placeholder.svg?height=60&width=60",
      location: "杭州",
      experience: "1-3年",
      skills: ["UI设计", "UX研究", "原型设计", "品牌设计"],
      bio: "蚂蚁金服设计师，专注于金融科技产品设计，追求极致用户体验",
      rating: 4.6,
      projects: 6,
      connections: 67,
      verified: true,
      availability: "立即可用",
      contact: {
        email: "chen.meili@example.com",
        linkedin: "chen-meili-design",
      },
    },
    {
      id: 5,
      name: "刘建国",
      role: "商务拓展",
      avatar: "/placeholder.svg?height=60&width=60",
      location: "广州",
      experience: "5年+",
      skills: ["商务谈判", "渠道拓展", "合作伙伴", "销售管理"],
      bio: "华为企业业务部门总监，拥有丰富的B2B销售和渠道管理经验",
      rating: 4.8,
      projects: 20,
      connections: 312,
      verified: true,
      availability: "3个月后",
      contact: {
        email: "liu.jianguo@example.com",
        phone: "+86 136-0013-6000",
        linkedin: "liu-jianguo-bd",
      },
    },
    {
      id: 6,
      name: "赵敏",
      role: "财务总监",
      avatar: "/placeholder.svg?height=60&width=60",
      location: "成都",
      experience: "5年+",
      skills: ["财务管理", "投资分析", "风险控制", "税务筹划"],
      bio: "德勤会计师事务所高级经理，CPA持证，专业的财务和投资背景",
      rating: 4.9,
      projects: 10,
      connections: 145,
      verified: true,
      availability: "2个月后",
      contact: {
        email: "zhao.min@example.com",
        phone: "+86 135-0013-5000",
      },
    },
  ]

  const filteredMembers = teamMembers.filter((member) => {
    const matchesSearch =
      member.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      member.role.toLowerCase().includes(searchQuery.toLowerCase()) ||
      member.skills.some((skill) => skill.toLowerCase().includes(searchQuery.toLowerCase()))

    const matchesRole = selectedRole === "all" || member.role.includes(selectedRole)
    const matchesLocation = selectedLocation === "all" || member.location === selectedLocation
    const matchesExperience = selectedExperience === "all" || member.experience === selectedExperience

    return matchesSearch && matchesRole && matchesLocation && matchesExperience
  })

  const handleContactMember = (member: any) => {
    // 这里可以打开联系弹窗或跳转到详情页
    alert(`联系 ${member.name}`)
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30">
      {/* 顶部导航 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button variant="ghost" size="sm" onClick={() => router.back()}>
                <ArrowLeft className="w-4 h-4 mr-2" />
                返回
              </Button>
              <div>
                <h1 className="text-xl font-bold text-slate-900">找团队</h1>
                <p className="text-sm text-slate-600">寻找志同道合的创业伙伴</p>
              </div>
            </div>
            <Badge className="bg-blue-100 text-blue-700">{filteredMembers.length} 位成员</Badge>
          </div>
        </div>
      </header>

      <main className="max-w-7xl mx-auto px-6 py-8">
        {/* 搜索和筛选 */}
        <Card className="mb-8 bg-white/70 backdrop-blur-sm border-0">
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div className="relative">
                <Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
                <Input
                  placeholder="搜索姓名、角色、技能..."
                  className="pl-10"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <Select value={selectedRole} onValueChange={setSelectedRole}>
                <SelectTrigger>
                  <SelectValue placeholder="选择角色" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有角色</SelectItem>
                  <SelectItem value="技术">技术合伙人</SelectItem>
                  <SelectItem value="产品">产品经理</SelectItem>
                  <SelectItem value="市场">市场营销</SelectItem>
                  <SelectItem value="设计">UI/UX设计师</SelectItem>
                  <SelectItem value="商务">商务拓展</SelectItem>
                  <SelectItem value="财务">财务总监</SelectItem>
                </SelectContent>
              </Select>
              <Select value={selectedLocation} onValueChange={setSelectedLocation}>
                <SelectTrigger>
                  <SelectValue placeholder="选择城市" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有城市</SelectItem>
                  <SelectItem value="北京">北京</SelectItem>
                  <SelectItem value="上海">上海</SelectItem>
                  <SelectItem value="深圳">深圳</SelectItem>
                  <SelectItem value="杭州">杭州</SelectItem>
                  <SelectItem value="广州">广州</SelectItem>
                  <SelectItem value="成都">成都</SelectItem>
                </SelectContent>
              </Select>
              <Select value={selectedExperience} onValueChange={setSelectedExperience}>
                <SelectTrigger>
                  <SelectValue placeholder="工作经验" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有经验</SelectItem>
                  <SelectItem value="1-3年">1-3年</SelectItem>
                  <SelectItem value="3-5年">3-5年</SelectItem>
                  <SelectItem value="5年+">5年以上</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        {/* 团队成员列表 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredMembers.map((member) => (
            <Card
              key={member.id}
              className="bg-white/70 backdrop-blur-sm border-0 hover:shadow-lg transition-all duration-200"
            >
              <CardHeader>
                <div className="flex items-start space-x-4">
                  <Avatar className="w-16 h-16">
                    <AvatarImage src={member.avatar || "/placeholder.svg"} alt={member.name} />
                    <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="flex items-center space-x-2">
                      <h3 className="font-semibold text-slate-900">{member.name}</h3>
                      {member.verified && (
                        <Badge className="bg-green-100 text-green-700 text-xs">
                          <Award className="w-3 h-3 mr-1" />
                          认证
                        </Badge>
                      )}
                    </div>
                    <p className="text-sm text-slate-600 mb-1">{member.role}</p>
                    <div className="flex items-center space-x-3 text-xs text-slate-500">
                      <div className="flex items-center space-x-1">
                        <MapPin className="w-3 h-3" />
                        <span>{member.location}</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <Briefcase className="w-3 h-3" />
                        <span>{member.experience}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-slate-600 mb-4 line-clamp-2">{member.bio}</p>

                <div className="space-y-3 mb-4">
                  <div>
                    <h4 className="text-xs font-medium text-slate-700 mb-2">核心技能</h4>
                    <div className="flex flex-wrap gap-1">
                      {member.skills.slice(0, 3).map((skill, index) => (
                        <Badge key={index} variant="outline" className="text-xs">
                          {skill}
                        </Badge>
                      ))}
                      {member.skills.length > 3 && (
                        <Badge variant="outline" className="text-xs">
                          +{member.skills.length - 3}
                        </Badge>
                      )}
                    </div>
                  </div>

                  <div className="grid grid-cols-3 gap-2 text-center">
                    <div>
                      <div className="flex items-center justify-center space-x-1">
                        <Star className="w-3 h-3 text-yellow-500" />
                        <span className="text-sm font-medium">{member.rating}</span>
                      </div>
                      <p className="text-xs text-slate-500">评分</p>
                    </div>
                    <div>
                      <div className="text-sm font-medium">{member.projects}</div>
                      <p className="text-xs text-slate-500">项目</p>
                    </div>
                    <div>
                      <div className="text-sm font-medium">{member.connections}</div>
                      <p className="text-xs text-slate-500">人脉</p>
                    </div>
                  </div>

                  <div className="flex items-center justify-between text-xs">
                    <span className="text-slate-500">可用性</span>
                    <Badge variant={member.availability === "立即可用" ? "default" : "outline"} className="text-xs">
                      {member.availability}
                    </Badge>
                  </div>
                </div>

                <div className="flex space-x-2">
                  <Button size="sm" className="flex-1" onClick={() => handleContactMember(member)}>
                    <MessageCircle className="w-3 h-3 mr-1" />
                    联系
                  </Button>
                  <Button variant="outline" size="sm">
                    详情
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        {filteredMembers.length === 0 && (
          <div className="text-center py-12">
            <Users className="w-16 h-16 text-slate-300 mx-auto mb-4" />
            <h3 className="text-lg font-medium text-slate-900 mb-2">暂无匹配的团队成员</h3>
            <p className="text-slate-600">尝试调整搜索条件或筛选器</p>
          </div>
        )}
      </main>
    </div>
  )
}
